<template>
  <view class="page">
    <view class="content">
      <view class="header">
        <view
          class="header-border"
          @click="navigateTo('/pages/comment/listindex?state=待鉴定&show=1')"
        >
          <view class="num">{{ commentcount.identifycommentusercount }}</view>
          <view>{{ $t("待鉴定") }}</view>
        </view>
        <view
          class="header-border"
          @click="switchTab('/pages/case/index?bar=0')"
        >
          <view class="num">{{
            commentcount.studycount - commentcount.userstudycount
          }}</view>
          <view>{{ $t("待学习") }}</view>
        </view>
        <view
          class="header-border"
          @click="navigateTo(`/pages/comment/listindex?state=待反馈`)"
        >
          <view class="num">{{ commentcount.feedbackcommentusercount }}</view>
          <view>{{ $t("待反馈") }}</view>
        </view>
      </view>
      <view class="main">
        <view class="main-header">
          <view class="main-header-flex" @click="popup1open">
            <text class="text-ellipsis">{{ poiId }}</text>
            <uv-icon name="arrow-right"></uv-icon>
          </view>
          <view class="main-pingfen-date">
            <view
              @click="dateacitve = 'd'"
              class="border"
              :class="dateacitve === 'd' ? 'active' : ''"
              >{{ $t("1日") }}
            </view>
            <view
              @click="dateacitve = 'w'"
              class="border"
              :class="dateacitve === 'w' ? 'active' : ''"
              >{{ $t("7日") }}
            </view>
            <view
              @click="dateacitve = 'm'"
              class="border"
              :class="dateacitve === 'm' ? 'active' : ''"
              >{{ $t("30日") }}
            </view>
            <view
              @click="dateacitve = 'month'"
              :class="dateacitve === 'month' ? 'active' : ''"
              >{{ $t("本月") }}</view
            >
          </view>
        </view>

        <view class="main-header" @click="selectType">
          <view class="selected-types">{{ selectedTypesText }}</view>
          <uv-icon name="arrow-right"></uv-icon>
        </view>
        <uv-line></uv-line>
        <view class="main-content">
          <view class="main-content-1">
            <view class="main-content-title">{{ $t("评价数量") }}</view>
            <view class="main-content-list">
              <view class="dian red"></view>
              <view
                >{{ $t("好评数") }} {{ data1[0].value }} ({{
                  (
                    (data1[0].value / (data1[0].value + data1[1].value)) *
                    100
                  ).toFixed(1)
                }}%)</view
              >
            </view>
            <view class="main-content-list">
              <view class="dian dark"></view>
              <view
                >{{ $t("差评数") }} {{ data1[1].value }} ({{
                  (
                    (data1[1].value / (data1[0].value + data1[1].value)) *
                    100
                  ).toFixed(1)
                }}%)</view
              >
            </view>
          </view>
          <view class="container">
            <ec-canvas
              id="mychart-dom-line"
              canvas-id="mychart-line"
              :ec="{ onInit: initChart1 }"
            >
            </ec-canvas>
          </view>
        </view>
        <uv-line></uv-line>
        <view class="main-content">
          <view class="main-content-1">
            <view class="main-content-title">{{ $t("门店回复") }}</view>
            <view class="main-content-list">
              <view class="dian red"></view>

              <view
                >{{ $t("未回复数") }} {{ data2[0].value }} ({{
                  (
                    (data2[0].value / (data1[0].value + data1[1].value)) *
                    100
                  ).toFixed(1)
                }}%)
              </view>
            </view>
            <view class="main-content-list">
              <view class="dian blue"></view>
              <view
                >{{ $t("好评回复数") }} {{ data2[1].value }} ({{
                  (
                    (data2[1].value / (data1[0].value + data1[1].value)) *
                    100
                  ).toFixed(1)
                }}%)
              </view>
            </view>
            <view class="main-content-list">
              <view class="dian dark"></view>
              <view
                >{{ $t("差评回复数") }} {{ data2[2].value }} ({{
                  (
                    (data2[2].value / (data1[0].value + data1[1].value)) *
                    100
                  ).toFixed(1)
                }}%)
              </view>
            </view>
          </view>
          <view class="container">
            <ec-canvas
              id="mychart-dom-line"
              canvas-id="mychart-line"
              :ec="{ onInit: initChart2 }"
            >
            </ec-canvas>
          </view>
        </view>
      </view>
    </view>
  </view>
  <uv-toast ref="toast"></uv-toast>
  <uv-popup
    ref="popup1"
    mode="bottom"
    @change="(e: any) => pageshow = e.show"
    :safeAreaInsetBottom="false"
  >
    <view>
      <selectdept
        ref="Deptref"
        v-model="formData.dep_id"
        @close="start"
        multiple
      >
      </selectdept>
    </view>
  </uv-popup>
</template>

<script setup lang="ts">
import api from "@/api";
import { onShow } from "@dcloudio/uni-app";
import {
  ref,
  reactive,
  watch,
  computed,
  shallowRef,
  inject,
  type Ref,
} from "vue";
import selectdept from "@/components/dept/selectdept.vue";
import dayjs from "dayjs";
import { switchTab, navigateTo } from "@/util/navigator";
import type { Iuser } from "@/interface";
import { dicttype } from "@/util/data";
import { useI18n } from "vue-i18n";
const $t = useI18n().t;

const echarts = require("../../wxcomponents/ec-canvas/echarts");
interface Icommentcount {
  commentcount: number;
  commentuserwatchcount: number;
  identifycommentusercount: number;
  feedbackcommentusercount: number;
  userstudycount: number;
  studycount: number;
  identifycommentsyscount: number;
}
const commentcount = ref<Icommentcount>({
  commentcount: 0,
  commentuserwatchcount: 0,
  identifycommentusercount: 0,
  feedbackcommentusercount: 0,
  userstudycount: 0,
  studycount: 0,
  identifycommentsyscount: 0,
});

const user = inject<Ref<Iuser>>("user");

const dateacitve = ref<"d" | "w" | "m" | "month">("d");

const toast = ref();

const popup1 = ref();
const Deptref = ref();

const pageshow = ref();

const formData = reactive<{
  dep_id: string[];
  feedbackTime: [string, string];
  type: string[];
}>({
  dep_id: [],
  feedbackTime: [
    dayjs().subtract(1, "day").format("YYYY-MM-DD HH:mm:ss"),
    dayjs().format("YYYY-MM-DD HH:mm:ss"),
  ],
  type: [],
});

onShow(() => {
  api<Icommentcount>("/wechat/comment/mycomment")
    .then((c) => {
      commentcount.value = c;
    })
    .catch((f) => {
      toast.value.show({
        message: f,
      });
    });
  start();
});

interface Iindex {
  count: string; // 总数量
  positivecount: string; // 负面评价
  positivereplyCount: string; // 差评回复数量
  replyCount: string; // 回复数量
  avgScore: number;
  dianpingavgScore: number;
}

const _dicttype = computed(() => {
  return dicttype;
});

function start() {
  popup1.value?.close();
  if (dateacitve.value === "d") {
    formData.feedbackTime = [
      dayjs().subtract(1, "day").format("YYYY-MM-DD HH:mm:ss"),
      dayjs().format("YYYY-MM-DD HH:mm:ss"),
    ];
  } else if (dateacitve.value === "w") {
    formData.feedbackTime = [
      dayjs().subtract(1, "week").format("YYYY-MM-DD HH:mm:ss"),
      dayjs().format("YYYY-MM-DD HH:mm:ss"),
    ];
  } else if (dateacitve.value === "month") {
    formData.feedbackTime = [
      dayjs().startOf("month").format("YYYY-MM-DD HH:mm:ss"),
      dayjs().format("YYYY-MM-DD HH:mm:ss"),
    ];
  } else {
    formData.feedbackTime = [
      dayjs().subtract(1, "month").format("YYYY-MM-DD HH:mm:ss"),
      dayjs().format("YYYY-MM-DD HH:mm:ss"),
    ];
  }

  api<Iindex>("/wechat/comment/index", formData).then((c) => {
    // 好评数
    data1.value[0].value = Number(c.count || 0) - Number(c.positivecount || 0);
    // 差评数
    data1.value[1].value = Number(c.positivecount || 0);
    // 未回复数
    data2.value[0].value = Number(c.count || 0) - Number(c.replyCount || 0);
    // 好评回复数
    data2.value[1].value =
      Number(c.replyCount || 0) - Number(c.positivereplyCount || 0);
    // 差评回复数
    data2.value[2].value = Number(c.positivereplyCount || 0);
    avgScore.avgScore = Number((c.avgScore || 0).toFixed(2));
    avgScore.dianpingavgScore = Number((c.dianpingavgScore || 0).toFixed(2));
    setOption(chartn1.value, data1.value, color1);
    setOption(chartn2.value, data2.value, color2);
  });
}

const avgScore = reactive({
  avgScore: 0,
  dianpingavgScore: 0,
});

const color1 = [
  {
    colorStops: [
      {
        offset: 0,
        color: "#FFAF83", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#FD845A", // 100% 处的颜色
      },
    ],
  },
  {
    colorStops: [
      {
        offset: 0,
        color: "#909093", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#57575A", // 100% 处的颜色
      },
    ],
  },
  {
    colorStops: [
      {
        offset: 0,
        color: "#838FFF", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#4C6DFD", // 100% 处的颜色
      },
    ],
  },
];

const color2 = [
  {
    colorStops: [
      {
        offset: 0,
        color: "#FFAF83", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#FD845A", // 100% 处的颜色
      },
    ],
  },

  {
    colorStops: [
      {
        offset: 0,
        color: "#838FFF", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#4C6DFD", // 100% 处的颜色
      },
    ],
  },
  {
    colorStops: [
      {
        offset: 0,
        color: "#909093", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#57575A", // 100% 处的颜色
      },
    ],
  },
];
const data1 = ref([
  {
    name: "好评数",
    value: 1,
  },
  {
    name: "差评数",
    value: 1,
  },
]);

const data2 = ref([
  {
    name: "未回复数",
    value: 1,
  },
  {
    name: "好评回复数",
    value: 1,
  },
  {
    name: "差评回复数",
    value: 1,
  },
]);

const chartn1 = shallowRef();
const chartn2 = shallowRef();

function initChart1(
  canvas: any,
  width: string | number,
  height: string | number,
  dpr: number
) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr, // new
  });
  canvas.setChart(chart);
  setOption(chart, data1.value, color1);
  chartn1.value = chart;
  return chart;
}

function initChart2(
  canvas: any,
  width: string | number,
  height: string | number,
  dpr: number
) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr, // new
  });
  canvas.setChart(chart);
  setOption(chart, data2.value, color2);
  chartn2.value = chart;
  return chart;
}

function setOption(chart: any, data: any, color: any) {
  var option = {
    color,
    tooltip: false,
    legend: false,
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,

        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 12,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: data,
      },
    ],
  };
  chart?.setOption(option);
}

function popup1open() {
  popup1.value.open();
}

watch(
  () => formData.type,
  () => {
    start();
  }
);

watch(
  () => dateacitve.value,
  () => {
    start();
  }
);

const poiId = computed(() => {
  if (formData.dep_id.length === 1) {
    return Deptref.value?.list.find(
      (c: Eps.DeptEntity) => c.id === formData.dep_id[0]
    )?.name;
  } else if (formData.dep_id.length === 0) {
    return "所有组织";
  } else {
    return `已筛选：${formData.dep_id.length}个组织`;
  }
});
wx.showShareMenu({
  withShareTicket: true,
});

const selectedTypesText = computed(() => {
  if (formData.type.length === _dicttype.value.length) {
    return "渠道：所有类型";
  }
  if (formData.type.length === 0) {
    return "渠道：所有类型";
  }
  return '渠道：'+ formData.type
    .map((t) => _dicttype.value.find((d) => d.value === t)?.label)
    .join(",");
});

function selectType() {
  uni.navigateTo({
    url: `/pages/publicsentiment/selecttype?types=${JSON.stringify(
      formData.type
    )}`,
    events: {
      acceptDataFromOpenedPage: function (data: any) {
        formData.type = data.types;
        start();
      },
    },
  });
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100vw;

  .header {
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    background: linear-gradient(to bottom, #ff935b, #fd754c);
    height: 276rpx;
    justify-content: space-around;
    padding-top: 36rpx;

    .header-border {
      width: 144rpx;
      height: 144rpx;
      border-radius: 32rpx;
      background-color: rgba(255, 255, 255, 1);
      box-shadow: 0px 2px 8px 0px rgba(228, 53, 0, 0.5);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;

      .num {
        font-size: 36rpx;
        color: #fd754c;
        font-weight: 600;
      }
    }
  }

  .main {
    margin-top: -36px;
    display: flex;
    flex: 1;
    padding-top: 72rpx;
    padding-left: 32rpx;
    padding-right: 32rpx;
    flex-direction: column;
    background-color: #fff;
    overflow: hidden;
    border-top-left-radius: 48rpx;
    border-top-right-radius: 48rpx;

    .main-header {
      display: flex;
      flex-wrap: nowrap;
      gap: 12rpx;
      font-weight: 600;
      margin-bottom: 24rpx;
      justify-content: space-between;
    }

    .main-pingfen {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 24rpx;
      justify-content: space-between;
      gap: 12rpx;
    }

    .main-pingfen-top {
      display: flex;
      flex-wrap: wrap;
      height: 64rpx;
      align-items: center;
      overflow: hidden;
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; //溢出不换行
      font-size: 28rpx;
      width: 400rpx;
    }

    .main-pingfen-top-1 {
      display: flex;
      flex-wrap: wrap;
      gap: 12rpx;
    }

    .main-pingfen-top-2 {
      display: flex;
      flex-wrap: wrap;
      gap: 12rpx;
      margin-left: 40rpx;
    }

    .main-pingfen-date {
      display: flex;
      flex-wrap: wrap;
      border-radius: 24rpx;
      background: linear-gradient(to bottom, #eeeeee, #d8d8d8);
      border: 1rpx solid rgba(200, 200, 200, 1);
      overflow: hidden;
      font-weight: 400;
      flex-shrink: 0;

      view {
        min-width: 80rpx;
        height: 64rpx;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .active {
        color: #fff;
        background-color: #fd754c;
      }

      .border {
        // border-left: 1rpx solid rgba(200, 200, 200, 1);
        border-right: 1rpx solid rgba(200, 200, 200, 1);
      }
    }

    .main-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      height: 342rpx;
      align-items: center;
      padding-left: 24rpx;
      padding-right: 24rpx;
    }

    .main-content-1 {
      .main-content-title {
        margin-bottom: 24rpx;
        font-weight: 600;
      }

      .main-content-list {
        font-size: 28rpx;
        display: flex;
        flex-wrap: wrap;
        gap: 12rpx;
        align-items: center;
        margin-bottom: 12rpx;

        .dian {
          margin-left: 8rpx;
          border-radius: 50%;
          width: 24rpx;
          height: 24rpx;
        }

        .red {
          background: linear-gradient(to right, #ffaf83, #fd845a);
        }

        .dark {
          background: linear-gradient(to right, #909093, #57575a);
        }

        .blue {
          background: linear-gradient(to right, #838fff, #4c6dfd);
        }
      }
    }
  }
}

.container {
  width: 280rpx;
  height: 280rpx;
}

.main-header-flex {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 24rpx;
  flex: 1;
  overflow: hidden;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
</style>
